<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/top.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="${pageContext.request.contextPath}/static/myJs/acount.js"></script>
<title>Insert title here</title>
</head>
<body>
<div style="padding-left: 15px;padding-right: 15px;">
	<h3 class="page-header" style="margin-top: 10px;" id="topTitle">我的账本</h3>
		<form id="searchForm" class="form-inline" style="padding-left: 15px;">
			<div class="form-group" style="width: 33%;margin-bottom: 5px;">
				<label for="name">账单名称：</label> 
				<input type="text" class="form-control" style="width: 180px;" id="name" name="name" placeholder="账单名称">
			</div>
			<div class="form-group" style="width: 33%;margin-bottom: 5px;">
				<label for="balance">收支方向：</label> 
				<select id="balance" name="balance" class="form-control" style="width: 180px;" onchange="setTypeValue(this,'type');">
				  <option value="">---请选择---</option>
				  <option value="1">收入</option>
				  <option value="2">支出</option>
				</select>
			</div>
			<div class="form-group" style="width: 33%;margin-bottom: 5px;">
				<label for="type">账单类型：</label> 
				<select id="type" name="type" class="form-control" style="width: 180px;" onclick="checkBalance('1');">
				  <option value="">---请选择---</option>
				</select>
			</div>
			<div class="form-group" style="width: 33%;">
				<label for="forwho">账单归属：</label> 
				<select id="forwho" name="forwho" class="form-control" style="width: 180px;">
				  <option value="">---请选择---</option>
				  <c:if test="${!empty forwho }">
				  <c:forEach items="${forwho }" var="fw">
				  	<option value="${fw.id }">${fw.name }</option>
				  </c:forEach>
				  </c:if>
				</select>
			</div>
			<div class="form-group" style="width: 33%;">
			</div>
			<div class="form-group" align="right" style="width: 33%;padding-right: 100px;">
				<input class="btn btn-info" type="button" value="新  增" onclick="addAcount();">
				<input class="btn btn-info" type="button" value="查  询" onclick="doSearch();">
				<input class="btn btn-info" type="button" value="重  置" onclick="formReset('searchForm');">
			</div>
		</form>
	<div style="margin-top: 10px;">
		<table id="acount_table">
		</table>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="acountModal" tabindex="-1" role="dialog" aria-labelledby="acountModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	        	<span aria-hidden="true">&times;</span>
	        </button> -->
	        <h4 class="modal-title" id="acountModalLabel">我的账单修改</h4>
	      </div>
	      <div class="modal-body">
	        <form id="acountForm" class="form-inline" style="padding-left: 15px;">
	        <input type="hidden" id="opFlag" value="" />
	        <input type="hidden" id="acount_id" name="id" />
			<div class="form-group" style="margin-bottom: 5px;padding-right: 20px;">
				<label for="acount_name">账单名称：</label> 
				<input type="text" class="form-control" style="width:150px;" id="acount_name" name="name" placeholder="账单名称">
			</div>
			<div class="form-group" style="margin-bottom: 5px;">
				<label for="acount_balance">收支方向：</label> 
				<select id="acount_balance" name="balance" class="form-control" style="width: 150px;" onchange="setTypeValue(this,'acount_type');">
				  <option value="">---请选择---</option>
				  <option value="1">收入</option>
				  <option value="2">支出</option>
				</select>
			</div>
			<div class="form-group" style="margin-bottom: 5px;padding-right: 20px;">
				<label for="acount_type">账单类型：</label> 
				<select id="acount_type" name="type" class="form-control" style="width: 150px;" onclick="checkBalance('2');">
				</select>
			</div>
			<div class="form-group" style="">
				<label for="acount_forwho">账单归属：</label> 
				<select id="acount_forwho" name="forwho" class="form-control" style="width: 150px;">
				  <option value="">---请选择---</option>
				  <c:if test="${!empty forwho }">
				  <c:forEach items="${forwho }" var="fw">
				  	<option value="${fw.id }">${fw.name }</option>
				  </c:forEach>
				  </c:if>
				</select>
			</div>
			<div class="form-group" style="width:100%;padding-right: 20px;margin-bottom: 5px;">
				<label for="acount_money">账单金额：</label> 
				<input type="text" class="form-control" style="width:150px;" id="acount_money" name="money" placeholder="账单金额">
			</div>
			<div class="form-group" style="width:100%;">
				<label for="remark">备注说明：</label> 
				<textarea class="form-control" id="remark" name="remark" style="width:400px;resize: none;" rows="2"></textarea>
			</div>
		</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" onclick="modelColse();" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" onclick="acountSave();" id="formSave">保存</button>
	      </div>
	    </div>
	  </div>
	</div>
</div>
</body>
</html>